<template>
  <div style="height: 100%;">
    <div class="header-top-body">
      <div class="header-body">
          <div class="header-logo searchlogo" @click="GoToindex">
            <img src="../../../img/mobile/logo1.png" alt="">
          </div>
          <div class="header-search">
            <div class="header-login" @click="loginBtn">
            登录
            </div>
            <div class="header-nav" @click="cancelSearch">
              <img src="../../../img/mobile/nav.png" alt="">
            </div>
          </div>
          <div class="clear"></div>
      </div>
      <div class="search-link" @click="searchLink">
        <img src="../../../img/mobile/searchlink.png">
      </div>
    </div>
    <div class="search-tab">
      <ul>
        <li v-for="(item, index) in tablist" v-if="item.id !=='TOP'" :class="{'active': checkedtab === index}" :data-id="index" @click="checkTab">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="second-tab">
      <span class="second-tab-link" @click="secondLink" v-for="secondtab in tablist[checkedtab].list" :data-id="secondtab.id">
        {{secondtab.name}}
      </span>
    </div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui'
  export default {
    props: ['tablist'],
    data () {
      return {
        checkedtab: 0
      }
    },
    methods: {
      GoToindex () {
        this.$emit('searchopen', false)
        this.$emit('checkstab', this.tablist.length - 1)
        sessionStorage.removeItem('checktab')
      },
      checkTab (val) {
        console.log(val.target.dataset.id)
        this.checkedtab = parseInt(val.target.dataset.id)
        console.log(this.checkedtab)
      },
      loginBtn () {
        MessageBox('提示', '功能正在上线中……')
      },
      cancelSearch () {
        console.log('search')
        this.$emit('searchopen', false)
      },
      secondLink (e) {
        this.$router.push('/home/list?id=' + e.target.dataset.id)
      },
      searchLink () {
        console.log('test')
        this.$emit('linksearch', true)
        this.$emit('searchopen', false)
      }
    }
  }
</script>
<style type="text/css">
  .header-top-body{
    background: #fff;
  }
  html{
    height: 100%;
  }
  body{
    height: 100%;
  }
  .search-tab {
    padding: 0 7vw;
    background: #fff;
  }
  .search-tab ul li:last{
    background: #f5f5f5;
  }
  .search-tab ul li:first{
    background: #f5f5f5;
  }
  .search-tab ul li{
    width: 20%;
    display: inline-block;
    line-height: 45px;
    text-align: center;
    font-size: 19px;
  }
  .search-tab ul li.active{
    background: #f5f5f5;
    color: #b71a35;
  }
  .search-tab ul{
    background: #fff;
  }
  .header-nav img{
    width: 15px;
    vertical-align: middle;
  }
  .header-nav{
    display: inline-block;
    padding: 10px;
  }
  .header-logo.searchlogo{
    padding-top: 10px;
  }
  .header-login{
    display: inline-block;
    font-size: 14px;
    border-bottom: 1px solid #4e6e6d;
    color: #4e6e6d;
    margin-right: 10px;
  }
  .search-link img{
    width: 100%;
  }
  .search-link{
    padding: 0px 18px 18px 18px;
    border-bottom: 1px solid #3b3b3b;
  }
  .second-tab{
    padding: 10px 7vw;
  }
  .second-tab-link{
    border:1px solid #4a4a4a;
    color: #4a4a4a;
    padding: 8px 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    margin: 10px 2%;
    width: 46%;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
</style>
